<template>
    <view style="height: 100%">
        <!-- 轮播图 -->
        <swiper
            class="home-swiper"
            @change="swipers"
             :style="'height: calc(100vh - '+(110*1)+'rpx);'"
            :circular="true"
            :indicator-dots="indicatordots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
        >
            <block v-for="(item, index) in banner" :key="index">
                <swiper-item @tap="seeding" data-id="0">
                    <image :src="img_url + item"  :style="'height: calc(100vh - '+(110*1)+'rpx);'" @load="getHeight" class="slide-image" />
                </swiper-item>
            </block>
        </swiper>
        <!-- 指示点 -->
        <!-- <view class="idos">
            <view>{{ current + 1 }}/{{ banner.length }}</view>
        </view> -->
    </view>
</template>

<script>
var util = require('../../utils/util.js');
const api = require('../../utils/api.js');
const app = getApp();
export default {
    data() {
        return {
            statusBarHeight: getApp().globalData.statusBarHeight,
            statusBarHeight1: getApp().globalData.statusBarHeight1,
            host: app.globalData.img_src,
            img_url: app.globalData.img_urls,
            indicatordots: false,

            //轮播图配置
            autoplay: true,

            interval: 3000,
            duration: 1200,
            current: 0,
            autoplay1: true,
            interval1: 5000,
            duration1: 1200,
            indicatordots1: false,
            vertical1: true,
            dataimg: [app.globalData.img_src + '/cpimg.png', app.globalData.img_src + '/cpimg.png'],
            news: ['每日瑜伽女神节 寻找最美伽人~', '每日瑜伽女神节 寻找最美伽人~'],
            navBarHeight: '',
            menuRight: '',
            menuBotton: '',
            menuHeight: '',
            swiperH: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        banner: {
            type: Array,
            default: ''
        },
    },
    created() {},
    /**
     * 组件的方法列表
     */
    methods: {
        attached: function () {
            const that = this;
            // // 获取系统信息
            // const systemInfo = uni.getSystemInfoSync();
            // // 胶囊按钮位置信息
            // const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            // // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
            // this.setData({
            //     navBarHeight: (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight,
            //     menuRight: systemInfo.screenWidth - menuButtonInfo.right,
            //     menuBotton: menuButtonInfo.top - systemInfo.statusBarHeight,
            //     menuHeight: menuButtonInfo.height
            // });
        },

        affiche() {
            uni.navigateTo({
                url: '/subcontract/news/news'
            });
        },

        swipers(e) {
            this.setData({
                current: e.detail.current
            });
        },

        getHeight: function (e) {
            var winWid = uni.getSystemInfoSync().windowWidth - 10; //获取当前屏幕的宽度
            var imgh = e.detail.height; //图片高度
            var imgw = e.detail.width;
            var sH = (winWid * imgh) / imgw + 30 + 'px';
            //////console.log(sH)
            // this.setData({
            //     swiperH: sH //设置高度
            // });
        },

        seeding() {
            ////console.log('占位：函数 seeding 未声明');
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    }
};
</script>
<style>
.home-swiper {
    width: 100%;
    height: auto;
    display: table;
}
.slide-image {
    width: 100%;
    height: auto;
    display: table;
}

.idos {
    width: auto;
    display: table;
    margin: auto;
    height: 15px;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    float: right;
    margin-top: -30px;
    position: relative;
    margin-right: 10px;
    padding: 0px 10px;
    /* margin-top: -20px;
  margin-bottom: 5px;
  position: relative;
  box-sizing: border-box;
  padding: 0px 7px; */
}
/* .idos>view{
  width: 8px;
  height: 8px;
  display: table;
  float: left;
  margin-right: 7px;
  background-color: rgba(255,255,255,0.5);
  margin-top: 3px;
}
.atives1{
  background-color: #fff !important;
  width: 25px !important;
}
.idos>view:last-child{
  margin-right: 0px;
} */
.news {
    width: 94%;
    height: 40px;
    display: table;
    height: 76rpx;
    background: #fbfbfb;
    border-radius: 10rpx 10rpx 20rpx 10rpx;
    margin: 20px 3%;
    position: relative;
    box-sizing: border-box;
    padding-left: 45px;
    padding-right: 30px;
}
.newicon {
    width: 24px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: 9px;
}
.home-swipers {
    width: 100%;
    height: 76rpx;
    display: table;
    overflow: hidden;
    border-radius: 10px;
}
.newtxt {
    width: 100%;
    height: 76rpx;
    display: table;
    font-size: 26rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #191919;
    line-height: 76rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.mores {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -10px;
}
.idos > view {
    font-size: 24rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #ffffff;
    line-height: 22px;
}
</style>
